<template>
    <div class="background">
        <el-header>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    背景素材库<i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :style="{'color': '#4065E0'}">背景素材库</el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/home/material/font">字体素材库</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/home/material/topic">主题素材库</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item >
                        <router-link to="/home/material/figure">驾舱形象素材库</router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-main>
            <div class="bg-main">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="中控" name="中控" class="control">
                        <div class="top">
                            <div class="item">
                                <el-input v-model="keyWord" placeholder="请输入关键字" prefix-icon="el-icon-search"></el-input>
                            </div>
                            <div class="item">
                                <span>状态:</span>
                                <el-select class="state" v-model="enable" style="width: 100px;">
                                    <el-option label="启用" value="1"> </el-option>
                                    <el-option label="不启用" value="0"> </el-option>
                                </el-select>
                            </div>
                            <div class="item">
                                <el-button :style="{ 'background': '#4065E0', 'color': '#fff', 'margin-right': 20+'px' }" @click="search(backList)">查询</el-button>
                                <el-button :style="{ 'background': '#EEEEEE', 'color': '#333333'}" @click="reset">重置</el-button>
                                 
                            </div>
                        </div>
                        <div class="middle">
                            <div class="mid-left">
                                <div v-if="selected">
                                   <span @click="multiple">选择</span> 
                                </div>
                                
                                <div v-else>
                                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                    <el-link class="delete" type="danger" :underline="false" @click="delBackground">删除</el-link>
                                </div>
                                
                            </div>
                            <el-button :style="{ 'background': '#4065E0', 'color': '#fff' }" @click="addStartPage">+ 添加背景</el-button>
                        </div>
                        <div>
                            <draggable v-model="filteList" class="content" :options = "{animation:500}" @update="datadragEnd">
                                <div class="item" v-for="(item) in filteList" :key="item.id">
                                    <span> {{ item.name }} </span>
                                    <div class="imgBox">
                                        <img v-lazy="item.image" @click="itemClick(item)">
                                    </div>
                                    
                                    <p @click="edit(item)">编辑</p>
                                    <el-checkbox v-if="showCheckbox" v-model="item.isChecked" @change="statusChange"></el-checkbox>
                                    <!-- 数据要有checkStatus字段 -->
                                </div>
                            </draggable>
                        </div>
                        <!-- 父组件直接控制dialogFormVisible的布尔值 -->
                        <bg-detail :appId="'nng0011'" :moduleId="2" v-if="dialogFormVisible" @sendState="getClose" :item="item"></bg-detail>
                        <add-bg-img :appId="'nng0011'" :bgName="'添加中控背景'" :moduleId="2" v-if="addBgVisible"  @formData="getState" @sendBolean="getBolean"></add-bg-img>
                        <bg-edit :appId="'nng0011'" :moduleId="2" v-if="bgEditVisible" @closeDialog="closeDialog" :item="item"></bg-edit>
                    </el-tab-pane>
                    <el-tab-pane label="仪表" name="仪表">
                            <meter-bg></meter-bg>
                    </el-tab-pane>
                    <el-tab-pane label="手机" name="手机">
                            <meter-mobile></meter-mobile>
                    </el-tab-pane>
                </el-tabs>
            </div>
            
        </el-main>
    </div>
</template>

<script>
import BgDetail from './compnents/BgDetail'
import AddBgImg from './compnents/AddBgImg'
import BgEdit from './compnents/Edit'
import MeterBg from './meter/Meter'
import MeterMobile from './mobile/Mobile'
import draggable from 'vuedraggable'
import { getBgList, deleteBackground } from 'api/backgroundController/backgroundController'
export default {
    name: 'BackGround',
    data() {
        return {
            activeName: '中控',
            keyWord: '',
            enable: '1',
            dialogFormVisible: false,
            addBgVisible: false,
            bgEditVisible: false,
            showCheckbox: false,
            backList: [],
            item: {},
            filteList: [],
            checkAll: false,
            selected: true
        }
    },
    components: {
        BgDetail,
        AddBgImg,
        BgEdit,
        draggable,
        MeterBg,
        MeterMobile
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event)
        },
        getClose(closeDialog){ // 父组件接收关闭Dialog的值
            this.dialogFormVisible = closeDialog
        },
        addStartPage(){
            this.addBgVisible = true
        },
        getBolean(closeAdd){
            this.addBgVisible = closeAdd
        },
        // item项的点击事件
        itemClick(item){
            this.dialogFormVisible = true
            this.item = item  // 点击项的数据传递给背景详情页面
        },
        // 查询
        search(dataSouce){
            if(dataSouce){
                var _keyword = this.keyWord
                var status = parseInt(this.enable)
                this.filteList = dataSouce.filter(item => {
                    if(item.name.indexOf(_keyword) > -1 && item.isActive == status){
                        return item
                    }
                })
            }else{
                return
            }
           
        },
        // 重置
        reset(){
            this.keyWord = ''
            this.enable = '1'
            this.filteList = this.backList
        },
        // 多选
        multiple(){
            this.selected = false
            this.showCheckbox = !this.showCheckbox
            
        },
        // 选择框的状态改变时的change函数
        statusChange(value){
            var num = 0
            this.filteList.forEach((item,index,arr) => {
                if(item.isChecked){
                    num++
                }
                if(num == arr.length){
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            })
            
        },
        // 全选
        handleCheckAllChange(){
            this.filteList.forEach(item => {
                item.isChecked = this.checkAll
            })
        },
        // 删除,filteList
        delBackground(){
            var bgIdArr = []
            if(this.filteList.length != 0){
                for(var i = this.filteList.length-1; i >= 0; i--){
                    if(this.filteList[i].isChecked){
                        bgIdArr.push(this.filteList[i].bgId)
                        this.filteList.splice(i,1);
                    }
                }
                
            }else{
                return
            }
            if(bgIdArr.length != 0){
                deleteBackground(bgIdArr).then(res => {
                    console.log(res)
                })
            }
            
            this.selected = true
            this.showCheckbox = !this.showCheckbox
        },
        // 获取添加背景表单的数据并添加到背景数组
        getState(item){
            var newBackground = item
            
            // this.backList.push(newBackground)
            this.filteList.push(newBackground)
        },
        // 拖拽结束时的事件
        datadragEnd(evt){
            evt.preventDefault();
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
            console.log(this.filteList);
        },
        // 编辑
        edit(item){
            this.bgEditVisible = true
            this.item = item
        },
        // 关闭编辑Dialog
        closeDialog(status){
            this.bgEditVisible = status
        },
        // 请求中控背景列表
        getBackList(){
            var params = {
                appId: 'nng0011',
                moduleId: 2
            }
            getBgList(params).then(res => {
                console.log(res)
                if(res.data != null){
                    this.backList = res.data
                    this.filteList = this.backList
                }
            })
            .catch(res => {
                this.$message.error(res.resultMsg)
            })
        }
    },
    created(){
        this.getBackList()
    },
    mounted(){
        // 防止火狐浏览器拖拽的时候以新标签页打开
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
}
</script>

<style lang="scss" scoped>
.background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 20;
    .el-header{
        line-height: 60px;
        font-size: 25px;
        font-weight: 700;
        .el-dropdown {
            color: #333333;
            font-size: 16px;
        }
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 60px;
        .bg-main{
            width: 100%;
            height: 100%;
            .control{
                position: relative;
            }
            .top{
                display: flex;
                justify-content: space-between;
                .item{
                display: flex;
                line-height: 40px;
                
                    span{
                        white-space: nowrap;
                        padding-right: 10px;
                    }
                }
            }
            .middle{
                text-align: right;
                margin: 30px 0;
                line-height: 40px;
                .mid-left{
                    float: left;
                    span{
                        padding-right: 20px;
                        color: #666666;
                        cursor: pointer;
                        font-size: 14px;
                    }
                }
            }
            .content{
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                // align-content: space-around;
                .item{
                    position: relative;
                    width: 190px;
                    height: 190px;
                    margin: 0 10px;
                    margin-bottom: 10px;
                    box-sizing: border-box;
                    span{
                        position: absolute;
                        left: 14px;
                        top: 14px;
                        color: #ffffff;
                        font-size: 10px;
                        box-sizing: border-box;
                    }
                    .imgBox{
                        width: 180px;
                        height: 160px;
                        padding: 7px 0;
                        margin: 0 auto;
                        box-sizing: border-box;
                    }
                    img{
                        height: 100%;
                        width: 100%;
                    }
                    p{
                        position: absolute;
                        width: 180px;
                        height: 22px;
                        line-height: 22px;
                        bottom: 2px;
                        text-align: center;
                        color: #333333;
                        background-color: #DDDDDD;
                        font-size: 10px;
                        border-radius:3px;
                        margin: 0 6px;
                        box-sizing: border-box;
                    }
                    
                }
            }
        }
    }
}
.el-dropdown-menu {
    padding: 0;
    top: 100px !important;
    left: 204px !important;
}
.el-dropdown-menu__item:not(.is-disabled):hover{
    color: #4065E0;
}

</style>

